import React, {useState, useEffect, useRef, memo, useCallback, Fragment} from "react";
import { IconClose, IconPlus, IconArrowLeft, IconArrowRight } from 'artemis-icon'
import './StyleGrid.less'


export const TabPaneComponent = memo(function ({ children }) {
  return <>{ children }</>
})

const Tabs = memo(function ({ children, add, onAdd }) {
  const [visible, setVisible] = useState(0)
  const [more, setMore] = useState(false)
  const [scrollLeft, setScrollLeft] = useState(0)
  const box = useRef()
  const inner = useRef()

  useEffect(() => {
    setMore(inner.current.scrollWidth > box.current.scrollWidth)
    inner.current.scrollLeft = scrollLeft * inner.current.clientWidth;
  }, [scrollLeft] as any)

  const onLeftClick = () => {
    if (scrollLeft < 0) {
      setScrollLeft(0)
    } else {
      setScrollLeft(scrollLeft - 1)
    }
  }

  const onRightClick = () => {
    if (scrollLeft * inner.current.clientWidth < inner.current?.scrollWidth - inner.current.clientWidth) {
      setScrollLeft(scrollLeft + 1)
    }
  }

  const onAddClick = () => {
    onAdd()
    setMore(inner.current.scrollWidth > box.current.scrollWidth)
  }

  return (
    <div className="tabs">
      <div className="tabs-header row">
        <div className="header-content" ref={box}>
          {
            more && (
              <div className="tabs-action flex-center" onClick={onLeftClick}>
                <IconArrowLeft className="action-icon action-left"/>
              </div>
            )
          }
          <div className="header-content-inner" ref={inner}>
            {
              Array.isArray(children) ? (
                children.map((item, index) => {
                  return (
                    <div
                      key={index}
                      className={`tabs-title flex-center ${index === visible ? 'title-active' : ''}`}
                      onClick={() => setVisible(index)}
                    >
                      { item.props.title }
                    </div>
                  )
                })
              ) : (
                children.props.title
              )
            }
          </div>
          {
            more && (
              <div className="tabs-action flex-center" onClick={onRightClick}>
                <IconArrowRight className="action-icon action-right"/>
              </div>
            )
          }
        </div>
        {
          add && (
            <div className="header-action">
              <IconPlus className="action-icon action-add" onClick={onAddClick}/>
            </div>
          )
        }
      </div>
      <div className="tabs-body">
        {
          Array.isArray(children) ? children.map((item, index) => {
            return (
              <div
                key={index}
                className={`tab-item ${index === visible ? 'tab-active' : ''}`}
              >
                { item }
              </div>
            )
          }) : (
            <div className="tab-item tab-active">
              { children }
            </div>
          )
        }
      </div>
    </div>
  )
})



export default Tabs
